<template>
  <div class="echarts-wraper">
    <div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  setup() {
    const { proxy } = getCurrentInstance()
    const drawChart = (value) => {
      const myChart = echarts.init(proxy.$refs.echarts)
      const option = {
        legend: {
          show: true,
          bottom: -5,
          left: 'center',
          type: 'scroll',
          icon: 'circle'
        },
        grid: {
          left: 30,
          right: 60,
          top: 50,
          bottom: 40,
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          axisPointer: { type: 'shadow' },
          formatter: function (params) {
            return params.marker + params.data.name + '：' + params.data.percent
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            data: value,
            label: {
              formatter: function (params) {
                return params.data.name + ' ' + params.data.percent
              }
            }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
    return { drawChart }
  }
}
</script>
